<template>
  <div class="index">
    <!-- logo -->
    <div class="plr10 frsc logo-container">
      <img class="linshi-logo" :src="logoImgUrl" alt="logo">
    </div>
    <!-- 轮播图 -->
    <van-swipe
    :autoplay=3000
    :duration=500
    :loop="true"
    :show-indicators="true">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img class="home-banner" v-lazy="image" alt="首页banner">
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框 -->
    <search></search>
    <!-- 领取优惠券 -->
    <index-header-bar>
      <div class="slot-title">领券享受更大的优惠</div>
    </index-header-bar>
    <!-- 优惠券 -->
    <div class="frbswrap coupons-container">
      <coupon class="coupon"></coupon>
      <coupon class="coupon"></coupon>
      <coupon class="coupon"></coupon>
    </div>
    <!-- 限时抢购 -->
    <index-header-bar>
      <div class="frcc slot-title">
        <img class="slot-time-icon" :src="timeLimitIcon">
        <div class="slot-time-tile">限时抢购</div>
      </div>
    </index-header-bar>
    <!-- 商品列表 -->
    <div class="product-bar-container">
      <div class="product-list" v-for="(item, index) in [1,2,3]" :key="index">
        <index-single-product></index-single-product>
      </div>
      <div class="more-product bgff" @click="clickMoreProduct">
        更多商品
      </div>
    </div>
    <!-- 产品系列 -->
    <product-list-header></product-list-header>
    <!-- 产品列表 -->
    <div class="frbswrap product-list-item-container">
      <product-list-item></product-list-item>
      <product-list-item></product-list-item>
      <product-list-item></product-list-item>
    </div>
    <div class="space"></div>
  </div>
</template>
<script>
import Search from '@/components/Search'
import IndexHeaderBar from '@/components/IndexHeaderBar'
import Coupon from '@/components/Coupon'
import IndexSingleProduct from '@/components/IndexSingleProduct'
import ProductListHeader from '@/components/ProductListHeader'
import ProductListItem from '@/components/ProductListItem'
export default {
  components: {Search, IndexHeaderBar, Coupon, IndexSingleProduct, ProductListHeader, ProductListItem},
  data () {
    return {
      logoImgUrl: require('@/common/image/linshimuye-logo.png'),
      images: [
        require('@/common/image/index-banner.png'),
        require('@/common/image/index-banner.png'),
        require('@/common/image/index-banner.png')
      ],
      timeLimitIcon: require('@/common/image/time-limit-icon.png')
    }
  },
  mounted () {
    this._login()
  },
  methods: {
    _login () {
      this.$axios.get('/api/login/login')
        .then(res => {
          console.log(res)
        })
        .catch(error => {
          console.log(error)
        })
    },
    clickMoreProduct () {
      this.$router.push({name: 'ProductListPage'})
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'
.linshi-logo
  height 0.9rem
  width 101px
.logo-container
  height 0.9rem
.home-banner
  vertical-align text-top
  height 4.5rem
  width 7.5rem
.product-list >>> .index-single-product
  border-bottom 1px solid $ceb
.more-product
  height .80rem
  line-height .80rem
  font-size .28rem
  text-align center
  border-bottom 1px solid $ceb
  text-indent -.3rem
  color $theme-color
  background $cff url('') no-repeat 4.2rem center
  background-size .28rem .28rem
// 组件样式
.coupons-container
  overflow hidden
  padding .20rem .20rem 0
  background-color $cf8
.coupon:nth-child(2n+1)
  margin-right: .20rem
  margin-bottom .20rem
.product-list-item-container
  padding .20rem
// 组件 slot
.index-header-bar >>> .slot-title
  padding 0 .4rem
  font-size .28rem
  color $coupon-color
.index-header-bar >>> .slot-time-icon
  margin-right .2rem
  width .28rem
  height .28rem
</style>

ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQCii/NGm7yxSOyczY51+/dBQhXjZ8jT4MU1jDk+k5LutJ8C/G8OG1a+MBmXYDuvUOYNFmz3dl0+2aEtIfxQUsnnHvnQNfbC2jH6nnicgi7QzN4Fn7C8+vrHx+vO8a0W4kGcO8bZpL0cfoN1uPNJnwzfKR5hQ+DO1FLN3xTOJm1l32unBGpb+P/Buz4mbTNOUyEnzds+xeo5/93aJ9QyEkK2cY6dGfYctYzROot97nIAlnL9RGB0zN9r6Mj/Z2pCn1WDkrCByEQinU+eRKf44Q1hX1PHGiHhcmFywAmawqUI3o8iFgnFMftH5gwhTODi8HuXu2cDfHjVIFRHgqh2LcXx win7@WIN7-PC
